<template>
  <div>
    <a-table :columns="column" :data-source="trashed">
      <template #bodyCell="{column, record}">
        <template v-if="column.key === 'author'">
          {{ record.author ? record.author.name : '匿名用户' }}
        </template>
        <template v-if="column.key === 'operation'">
          <a-button type="link" @click="restore(record.id)">
            从回收站中移除
          </a-button>
          <a-button type="link" danger disabled>
            完全删除
          </a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import {createVNode, onMounted, ref} from "vue";
import {apiGet} from "../../../fentch";
import {message, Modal} from "ant-design-vue";
import ExclamationCircleOutlined from "@ant-design/icons-vue/lib/icons/ExclamationCircleOutlined";

const trashed = ref([])
const column = [
  {key: 'id', title: 'ID', dataIndex: 'id'},
  {key: 'title', title: '标题', dataIndex: 'title'},
  {key: 'author', title: '作者', dataIndex: 'author'},
  {key: 'deleted_at', title: '删除时间', dataIndex: 'deleted_at'},
  {key: 'operation', title: '操作'},
]

// 获取所有已删除的对象
const getTrashedItem = () => {
  apiGet('/blogs/deleted').then(res => {
    if (res.data.code === 0) {
      trashed.value = res.data.data
      return
    }
    message.error(res.data.message)
  })
}

// 页面初始化
onMounted(() => {
  getTrashedItem()
})

// 还原
const restore = id => {
  const modal = Modal.confirm({
    title: '警告',
    content: '确定后将恢复所选定的文章',
    icon: createVNode(ExclamationCircleOutlined),
    onOk: () => {
      apiGet(`/blogs/restore/${id}`).then(res => {
        if (res.data.code === 0) {
          message.success('恢复成功')
          getTrashedItem()
          return
        }
        message.error(res.data.message)
      })
    },
    onCancel: () => {}
  });
}
</script>

<style scoped>

</style>